<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简约博客</title>
    <link rel="stylesheet" href="../static/css/home.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
</head>
<body>
    <header class="site-header">
        <div class="container">
            <h1 class="site-title">简约博客</h1>
            <p class="site-description">记录思考与发现</p>
        </div>
    </header>

    <nav class="main-nav">
        <div class="container">
            <ul class="nav-list">
                <li><a href="#">首页</a></li>
                <li><a href="#">文章</a></li>
                <li><a href="#">分类</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </div>
    </nav>
    <main class="main-content">
        <div class="main-left-content"></div>
        <div class="container">
            <article class="post-card">
                <div class="post-meta">
                    <time datetime="2023-05-15">2023年5月15日</time>
                    <span class="post-category">设计</span>
                </div>
                <h2 class="post-title"><a href="#">简约设计的艺术与哲学</a></h2>
                <p class="post-excerpt">简约设计不仅仅是视觉上的简洁，更是一种思维方式和生活态度。它要求我们去除冗余，专注于本质，在有限的元素中创造无限的可能...</p>
                <a href="#" class="read-more">继续阅读</a>
            </article>

            <article class="post-card">
                <div class="post-meta">
                    <time datetime="2023-05-10">2023年5月10日</time>
                    <span class="post-category">技术</span>
                </div>
                <h2 class="post-title"><a href="#">现代CSS布局技术探索</a></h2>
                <p class="post-excerpt">随着CSS的不断发展，我们有了更多强大的布局工具。从Flexbox到Grid，从容器查询到子网格，这些新技术如何改变我们的前端开发方式...</p>
                <a href="#" class="read-more">继续阅读</a>
            </article>

            <article class="post-card">
                <div class="post-meta">
                    <time datetime="2023-05-05">2023年5月5日</time>
                    <span class="post-category">生活</span>
                </div>
                <h2 class="post-title"><a href="#">城市中的宁静角落</a></h2>
                <p class="post-excerpt">在繁忙的都市生活中，寻找那些被忽视的宁静空间。公园的长椅、咖啡馆的角落、图书馆的窗边，这些地方如何成为我们心灵的避风港...</p>
                <a href="#" class="read-more">继续阅读</a>
            </article>
        </div>

        <div class="main-right-content"></div>
    </main>

    <aside class="sidebar">
        <div class="container">
            <div class="widget">
                <h3 class="widget-title" id="about">关于我</h3>
                <p>一名热爱设计与技术的博主，分享生活中的思考与发现。</p>
                <a href="#" class="read-more">关于更多...</a>
            </div>

            <div class="widget">
                <h3 class="widget-title">分类</h3>
                <ul class="category-list">
                    <li><a href="#">设计</a></li>
                    <li><a href="#">技术</a></li>
                    <li><a href="#">生活</a></li>
                    <li><a href="#">旅行</a></li>
                    <li><a href="#">阅读</a></li>
                </ul>
            </div>

            <div class="widget">
                <h3 class="widget-title">订阅</h3>
                <form class="subscribe-form">
                    <input type="email" placeholder="您的邮箱地址" required>
                    <button type="submit">订阅</button>
                </form>
            </div>
        </div>
    </aside>

    <footer class="site-footer">
        <div class="container">
            <p>&copy; 2023 简约博客. 保留所有权利.</p>
            <div class="social-links">
                <a href="#">微博</a>
                <a href="#">GitHub</a>
                <a href="#">Twitter</a>
            </div>
        </div>
    </footer>
</body>
</html>